<template>
    <el-input v-model.number="value.num" :min="1" placeholder="数量" :style="getInputStyle()" class="select-item-input" @input="handleInput">
        <select-item v-model="value.id" :type="type" :clearable="false" :style="getItemStyle()" @input="handleInput"  slot="prepend"></select-item>
<!--        <el-button slot="append" icon="el-icon-search"></el-button>-->
    </el-input>
</template>

<script>
export default {
    props: {
        inputStyle: "",
        itemStyle: "",
        value: {
            type: Object,
            default: {
                id: 0,
                type: 0,
                num: 0,
            },
        },
        type: {
            type: Array,
            default: null,
        },
    },
    data() {
        return {
            loading: false,
            itemOptions: this.$store.state.item.options,
            rmbIds: [1006, 1015, 1016, 1017],
        }
    },
    computed: {
        getItemById() {
            return this.$store.getters["item/getItemById"];
        }
    },
    watch: {
        // value(val, old) {
        //     if (val) {
        //         console.log("watch syncForm", _.isEqual(val, old), _.isEqual(_.toPlainObject(val), _.toPlainObject(this.form)));
        //         this.syncForm();
        //     }
        // },
    },
    methods: {
        handleInput(e) {
            let value = this.getItemById(this.value.id, this.value.num);
            // TODO 人民币的话需要/100
            this.$emit("input", value);
        },
        getInputStyle() {
            return (this.$props.inputStyle || this.$props.inputStyle !== "") ? this.$props.inputStyle : "310px";
        },
        getItemStyle() {
            return (this.$props.itemStyle || this.$props.itemStyle !== "") ? this.$props.itemStyle : "210px";
        }
    },
    created() {

    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
.select-item-input ::v-deep  .el-input-group__prepend {
    background-color: #fff !important;
    color: black;
}
</style>

